<template>
  <div>
    <div class="service-banner">
          <div class="banner_tip w" style="text-align: center;"  >
            <div class="ba_t" style="color: #fff;font-size: 40px;padding-top: 174px;" >Keyword Basic Optimization</div>
            <div class="ba_b" style="color: #fff; font-weight: bold;">
              The text metadata of an application refers to the written content on its page, which directly affects its ranking.
              <br>
              We can provide professional metadata plan to increase the number of keywords it covers
            </div>
          </div>
    </div>
    <div class="breadcrumbs-custom bg-gray-200">
      <div class="w">
        <div style="display: flex;align-items: center;justify-content: space-between;">
          <div class="breadcrumbs-custom-title">Keyword Basic Optimization</div>
          <ul class="breadcrumbs-custom-path">
            <li>Services</li> /
            <li class="active">Keyword Basic Optimization</li>
          </ul>
        </div>
      </div>
    </div>


    <div class="service-main">
      <!-- <div style="position: static;top: 0;">333</div> -->
      <div style="display: flex;justify-content: space-between;" class="w">
        <div class="service-main-l">

            <div class="service-des">
              <h1 class="h6 font-weight-bold">What is Keyword Basic Optimization?</h1>
              <p>
                If you want to improve your app's keywords ranking, the app must cover these target keywords.
              </p>
              <p>
                We will provide a complete keyword text plan, include: App Name, Subtitle, Keyword Field(iOS) and Description(Android). This can help your app increase the number of keywords it covers.
              </p>
            </div>


            <div class="service-des">
              <h1 class="h6 font-weight-bold">How does MobFlyer make a keyword plan?</h1>
              <p>
                We will research your product features, user groups, competing products, current popular products, and combined with the App Store/Google Play algorithm to create a professional keyword plan.
              </p>
            </div>



          <contentDes></contentDes>







        </div>


        <div class="service-main-r "  :class="{fixbox:isFix,nobottom:nobottom}">
          <div class="box-icon-classic">
            <div class="box-icon-title">
             Apple Ads Services
            </div>
            <div class="mt-2">5%</div>
            <div>
              <mark>Ad Spend*5%</mark>
            </div>
            <ul class="list-marked" style="margin-top: 20px;">
              <li><i class="el-icon-circle-check"></i>Account Set Up</li>
              <li><i class="el-icon-circle-check"></i>Create and Manage Campaigns</li>
              <li><i class="el-icon-circle-check"></i>Better Ranking</li>
              <li><i class="el-icon-circle-check"></i>Select and Bid Keywords</li>
              <li><i class="el-icon-circle-check"></i>Optimize Ad Effect</li>
              <li><i class="el-icon-circle-check"></i>Daily Data Report</li>

            </ul>

            <div style="text-align: center;padding-top: 15px;">
              <div class="fs_btn mybtn" @click="$router.push('/contact')">
                    Get Services
              </div>
            </div>

          </div>

        </div>



      </div>

    </div>

  </div>
</template>

<script>
  import contentDes from './content';
  export default {
    components:{
          contentDes
    },
    data() {
      return {
         nobottom:false,
        isFix: false
      }


    },
    mounted() {

      window.addEventListener('scroll', this.handleScroll);
    },
    methods: {
     getScrollBottomPx() {
         const scrollHeight = document.documentElement.scrollHeight; // 总滚动高度
         const viewportHeight = window.innerHeight; // 视口高度
         const scrollTop = document.documentElement.scrollTop; // 滚动的距离
         const bottomPx = scrollHeight - viewportHeight - scrollTop; // 距离底部的px值
         return bottomPx;
       },
     handleScroll(event) {

       if (window.scrollY >= 380) {
         this.isFix = true;
       } else {
         this.isFix = false;
       };

       if(this.getScrollBottomPx()<=360){
           this.nobottom = true;
       }else{
         this.nobottom = false;
       }

     }
    },
    beforeDestroy() {
      // 移除滚动事件监听
      window.removeEventListener('scroll', null);
    },




  }
</script>

<style>
</style>
